<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(["element", "jquery", "layer", "form", "table",'upload'], function(){
            var $ = layui.jquery;
            var element = layui.element;
            var upload = layui.upload;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var url;
            var tanIndex;

            //展示已知数据
            var mytable=table.render({
                elem: '#demo'
                , url: 'getRoomByName'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , even: true   //开启间隔行的背景颜色
                , page: true //是否显示分页
                , limits: [10,20,30]
                , limit: 10 //每页默认显示的数量
                , cols: [[//标题栏
                    {
                        type: 'checkbox',
                        fixed: 'left' //启动复选框
                    },
                    {field: 'roomNum', title: '房间号', sort: true, width: 250, align: 'center'}
                    , {field: 'typeName', title: '房间类型', sort: true, width: 250, align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'roomState', title: '房间状态', width: 250, align: 'center'}
                    , {field: 'roomPrice', title: '房间价格', sort: true, width: 250, align: 'center'}
                    , {
                        field: 'right', title: '操作',
                        toolbar: '#barDemo',
                        width: 300,
                        align: 'center'
                    }
                ]]
            });

            //搜索
            $("#selectName").click(function () {
                mytable.reload({
                    page: {curr: 1 , limit: 5},
                    method: 'POST',
                    url: 'getRoomByName',
                    where: {
                        typeName: $("#typeName").val() //参数 多个值,逗号隔开
                    }

                })
            })

            //新增房间
                $("#add").click(function (){
                    tanIndex= layer.open({
                        type:1,  //设置类型 默认为0 1 页面层 2 iframe层
                        title:'新增房间信息',  //标题
                        content:$("#addroom2"), //内容  type=0 的内容
                        skin:'layui-layer-molv',//skin - 样式类名
                        area:['600px'],  //area - 宽高
                        offset:[50,300],//offset - 坐标 默认：垂直水平居中
                        btnAlign:'c',//按钮排列
                        closeBtn:1,  //设置关闭按钮的样式 默认是1  0是没有 2
                        anim: 4,//设置动画
                        maxmin:true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                        success:function(index){
                            url="addRoom";
                            //清空表单数据
                            $("#dataform")[0].reset();
                        }
                    });
                });

                //新增form表单
                form.on("submit(dosubmit)",function(obj){
                    //序列化表单数据
                    var params=$("#dataform").serialize();
                    $.post(url,params,function(data){
                        //刷新数据表格
                        mytable.reload();
                        //关闭弹出层
                        layer.close(tanIndex);
                    });
                  })
            //新增form表单
            form.on("submit(dosubmit2)",function(obj){
                //序列化表单数据
                var params=$("#dataform2").serialize();
                $.post(url,params,function(data){
                    //刷新数据表格
                    mytable.reload();
                    //关闭弹出层
                    layer.close(tanIndex);
                });
            })


            //删除房间数据
            $("#delete").click(function (){
                var checkStatus = table.checkStatus('demo'); //即为基础参数 id 对应的值
                console.log(checkStatus.data) //获取选中行的数据
                console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
                console.log(checkStatus.isAll) //表格是否全选
                var roomId=""; //用于拼接id
                if(checkStatus.data.length>0){
                    for(var i =0;i<checkStatus.data.length;i++){
                        if(i==0){
                            roomId =  checkStatus.data[i].roomId;
                        }else{
                            roomId = checkStatus.data[i].roomId+"," + roomId;
                        }
                    }
                    $.ajax({
                        type:"get",
                        url:'deleRoomById',
                        data:'roomId='+roomId,
                        success:function(data){
                            //刷新数据表格
                            mytable.reload();
                            //关闭弹出层
                            layer.close(tanIndex);
                            layer.msg("删除成功",{
                                icon: 6,
                                time: 1000});
                        }
                    });
                }else{
                    layer.msg("没有选择数据",{
                        icon: 2,
                        time: 1000});
                }
            });


            //删除操作
            //每行按钮监听
            table.on('tool(demo)', function(obj){
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是  表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent =='edit'){
                    //修改操作
                    openUpdate(data);
                }else if(layEvent =='delete'){
                    //删除操作
                    layer.confirm('确定删除吗?', function(index){
                        $.get("deleRoomById","roomId="+data.roomId,function(back){
                            //刷新数据表格
                            mytable.reload();
                        });
                        layer.close(index);
                    });
                }
            });

            //修改弹出框
            function openUpdate(row){
                tanIndex= layer.open({
                    type:1,  //设置类型 默认为0 1 页面层 2 iframe层
                    title:'修改房间信息',  //标题
                    content:$("#addroom3"), //内容  type=0 的内容
                    skin:'layui-layer-molv',//skin - 样式类名
                    area:['600px'],  //area - 宽高
                    offset:[50,300],//offset - 坐标 默认：垂直水平居中
                    btnAlign:'c',//按钮排列
                    closeBtn:2,  //设置关闭按钮的样式 默认是1  0是没有 2
                    anim: 4,//设置动画
                    maxmin:true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                    success:function(index){
                        url="updateRoom";
                        //给表单赋值
                        form.val('dataform2',row);
                    }
                });
            }
        });


        //房间号正则表达式 新增
        layui.use(['table','form'], function(){
            var table=layui.table;
            var form=layui.form;

            form.verify({
                roomNum: function (value) {
                    let zj=/^\d{3}$/;
                    if (zj.test(value)) {
                        //房间号输入正确
                    } else {
                        return '房间号为4位数的数字';
                    }
                }
            })
        })


        //房间号正则表达式 修改
        layui.use(['table','form'], function(){
            var table=layui.table;
            var form=layui.form;

            form.verify({
                roomNum2: function (value) {
                    let zj=/^\d{3}$/;
                    if (zj.test(value)) {
                        //房间号输入正确
                    } else {
                        return '房间号为4位数的数字';
                    }
                }
            })
        })


        //金额的正则表达式 新增
        layui.use(['table','form'], function(){
            var table=layui.table;
            var form=layui.form;

            form.verify({
                roomPrice: function (value) {
                    let zj=/((^[-]?([1-9]\d*))|^0)(\.\d{1,2})?$|(^[-]0\.\d{1,2}$)/;
                    if (zj.test(value)) {
                        // return '身份证号格式正确';
                    } else {
                        return '请输入正确金额';
                    }
                }
            })
        })


        //金额的正则表达式 修改
        layui.use(['table','form'], function(){
            var table=layui.table;
            var form=layui.form;

            form.verify({
                roomPrice2: function (value) {
                    let zj=/((^[-]?([1-9]\d*))|^0)(\.\d{1,2})?$|(^[-]0\.\d{1,2}$)/;
                    if (zj.test(value)) {
                        // return '身份证号格式正确';
                    } else {
                        return '请输入正确金额';
                    }
                }
            })
        })





            //日期上传 新增
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var laydate2 = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#date1' ,//指定元素
                type: 'date'
            });
            laydate2.render({
                elem: '#date2',//指定元素
                type: 'date'
            });
        });

        //日期上传 修改
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var laydate2 = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#date3' ,//指定元素
                type: 'date'

            });
            laydate2.render({
                elem: '#date4',//指定元素
                type: 'date'
            });
        });


    </script>
</head>
<body>
<form >
    <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <input type="text" name="typeName" id="typeName" lay-verify="required|typeName" autocomplete="off" class="layui-input" placeholder="输入房间类型查询">
            </div>
            <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="selectName" >查询</button>
            <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-add-circle-fine"  lay-event="add" id="add">增加一条数据</button>
            <button type="button" class="layui-btn layui-btn-danger  layui-icon layui-icon-delete"  lay-event="delete" id="delete">批量删除</button>

    </div>
</form>
<!-- 表格行内toolbar -->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs  layui-icon layui-icon-edit"
       lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger  layui-btn-xs layui-icon layui-icon-delete"
        lay-event="delete">删除</a>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>


<%--新增的表单--%>
<div id="addroom2"  style="display: none">
    <form  class="layui-form" lay-filter="dataform" id="dataform" method="post">

        <div class="layui-form-item" >
            <label class="layui-form-label">房间号：</label>
            <div class="layui-input-inline">
                <input type="text" name="roomNum" id="roomNum"  lay-verify="required|roomNum"
                       autocomplete="off" placeholder="新增房间号" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房间类型:</label>
            <div class="layui-input-inline">
                <select name="typeName">
                    <option value="">请选择</option>
                    <option value="1,单人间">单人间</option>
                    <option value="2,双人间">双人间 </option>
                    <option value="3,海景房">海景房</option>
                    <option value="4,总统套房">总统套房</option>
                    <option value="5,情侣房">情侣房</option>
                    <option value="6,麻将房">麻将房</option>
                    <option value="7,豪华套间">豪华套间</option>
                    <option value="8,电竞房">电竞房</option>
                    <option value="9,大床房">大床房</option>
                    <option value="10,商务间">商务间</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">房间价格:</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="roomPrice" placeholder="￥" autocomplete="off" id="roomPrice"  lay-verify="required|roomPrice"class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">单位：元</div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">房间状态</label>
            <div class="layui-input-block">
                <input type="radio" name="roomState" value="未预定" title="未预定">
                <input type="radio" name="roomState" value="已预定" title="已预定" checked>
                <input type="radio" name="roomState" value="已入住" title="已入住" checked>
                <input type="radio" name="roomState" value="已离店" title="已离店" checked>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label " style="width: 100px">入住及退房时间</label>
                <div class="layui-inline" id="test6">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off"  id="date1" name="startTime" class="layui-input" placeholder="入住日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="date2" name="deadTime" class="layui-input" placeholder="退房日期">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="dosubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>





<%--====================================================分割线======================================================--%>




<%--修改的表单--%>
<div id="addroom3"  style="display: none">
    <form  class="layui-form" lay-filter="dataform2" id="dataform2" method="post">

        <div class="layui-form-item"  style="display: none">
            <label class="layui-form-label">房间ID：</label>
            <div class="layui-input-inline">
                <input type="text" name="roomId" id="roomId"
                       autocomplete="off" placeholder="房间ID" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" >
            <label class="layui-form-label">房间号：</label>
            <div class="layui-input-inline">
                <input type="text" name="roomNum" id="roomNum2"  lay-verify="required|roomNum"
                       autocomplete="off" placeholder="新增房间号" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房间类型:</label>
            <div class="layui-input-inline">
                <select name="typeName">
                    <option value="">请选择</option>
                    <option value="1,单人间">单人间</option>
                    <option value="2,双人间">双人间 </option>
                    <option value="3,海景房">海景房</option>
                    <option value="4,总统套房">总统套房</option>
                    <option value="5,情侣房">情侣房</option>
                    <option value="6,麻将房">麻将房</option>
                    <option value="7,豪华套间">豪华套间</option>
                    <option value="8,电竞房">电竞房</option>
                    <option value="9,大床房">大床房</option>
                    <option value="10,商务间">商务间</option>
                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">房间价格:</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="roomPrice" placeholder="￥" autocomplete="off" id="roomPrice2"  lay-verify="required|roomPrice"class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">单位：元</div>
        </div>




        <div class="layui-form-item">
            <label class="layui-form-label">房间状态</label>
            <div class="layui-input-block">
                <input type="radio" name="roomState" value="未预定" title="未预定">
                <input type="radio" name="roomState" value="已预定" title="已预定" checked>
                <input type="radio" name="roomState" value="已入住" title="已入住" checked>
                <input type="radio" name="roomState" value="已离店" title="已离店" checked>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label " style="width: 100px">入住及退房时间</label>
                <div class="layui-inline" id="test7">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off"  id="date3" name="startTime" class="layui-input" placeholder="入住日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="date4" name="deadTime" class="layui-input" placeholder="退房日期">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="dosubmit2">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
    </html>
